<!--
 * @Author: DUST
 * @Date: 2023-11-24 17:16:08
 * @LastEditors: DUST
 * @LastEditTime: 2024-11-11 15:54:15
 * @FilePath: \business-card-system\admin\src\views\admin\components\addBusinessCardUserModal.vue
 * @Description: 
 * undefined
-->
<template>
  <ant-modal
    :visible="visible"
    :type="type"
    :loading="loading"
    :width="1000"
    :title="title"
    @confirm="doConfirm"
    @cancel="cancel"
  >
    <a-form
      ref="formref"
      :model="formModel"
      class="ModalForm"
      :labelCol="{ span: 2 }"
      :wrapperCol="{ span: 20 }"
    >
      <a-form-item name="avatar" label="头像">
        <a-upload
          v-model:file-list="fileList"
          list-type="picture-card"
          :before-upload="beforeUpload"
          @preview="handlePreview"
        >
          <div v-if="fileList.length < 1">
            <plus-outlined />
            <div style="margin-top: 8px">头像</div>
          </div>
        </a-upload>
      </a-form-item>
      <a-form-item
        label="姓名"
        name="name"
        :rules="[{ required: true, message: '姓名不能为空' }]"
      >
        <a-input placeholder="请输入姓名" v-model:value="formModel.name" />
      </a-form-item>
      <a-form-item
        label="手机号"
        :rules="[{ required: true, message: '手机号不能为空' }]"
        name="mobile"
      >
        <a-input placeholder="请输入手机号" v-model:value="formModel.mobile" />
      </a-form-item>
      <a-form-item
        label="邮箱"
        :rules="[{ required: true, message: '邮箱不能为空' }]"
        name="email"
      >
        <a-input placeholder="请输入邮箱" v-model:value="formModel.email" />
      </a-form-item>
      <a-form-item
        label="微信号"
        :rules="[{ required: true, message: '微信号不能为空' }]"
        name="wxNumber"
      >
        <a-input
          placeholder="请输入微信号"
          v-model:value="formModel.wxNumber"
        />
      </a-form-item>
      <a-form-item
        label="办公地址"
        :rules="[{ required: true, message: '办公地址不能为空' }]"
        name="addr"
      >
        <a-select
          placeholder="请选择办公地址"
          v-model:value="formModel.addr"
        >
          <a-select-option v-for="item of addrList" :key="item" :value="item">
            {{ item }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item
        label="公司名称"
        :rules="[{ required: true, message: '公司名称不能为空' }]"
        name="companyName"
      >
        <a-select
          placeholder="请选择公司名称（可多选）"
          v-model:value="formModel.companyName"
          mode="multiple"
        >
          <a-select-option v-for="item of companyList" :key="item" :value="item">
            {{ item }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="职位" name="job">
        <a-input placeholder="请输入职位" v-model:value="formModel.job" />
      </a-form-item>
    </a-form>

    <a-modal
      :visible="previewVisible"
      :title="previewTitle"
      :footer="null"
      @cancel="handleCancel"
    >
      <img alt="example" style="width: 100%" :src="previewImage" />
    </a-modal>
  </ant-modal>
</template>

<script setup lang="ts">
import { ref, watch, reactive } from "vue";
import { modalType } from "../../../interface/enum";
import useForm from "@/utils/useForm";
import { PlusOutlined } from "@ant-design/icons-vue";
import config from "@/config";

function getBase64(file: File) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = (error) => reject(error);
  });
}
const previewVisible = ref(false);
const previewImage = ref("");
const previewTitle = ref("");
const fileList = ref<any[]>([]);
const handleCancel = () => {
  previewVisible.value = false;
  previewTitle.value = "";
};
const handlePreview = async (file: any) => {
  if (!file.url && !file.preview) {
    file.preview = (await getBase64(file.originFileObj)) as string;
  }
  previewImage.value = file.url || file.preview;
  previewVisible.value = true;
  previewTitle.value =
    file.name || file.url.substring(file.url.lastIndexOf("/") + 1);
};

const beforeUpload = (file: File) => {
  console.log(file);
  formModel.value.file = file;
  return false;
};

const props = defineProps({
  width: {
    type: Number,
    default: () => 400,
  },
  visible: {
    type: Boolean,
    default: () => false,
  },
  loading: {
    type: Boolean,
    default: () => false,
  },
  type: {
    type: String,
    default: () => "",
  },
  data: {
    type: Object,
    default: () => ({}),
  },
  addrList: {
    type: Array,
    default: () => ([]),
  },
  companyList: {
    type: Array,
    default: () => ([]),
  },
});
const emit = defineEmits(["ok", "update:visible"]);

const title = ref<string>();
watch(
  () => props.type,
  () => {
    console.log(props.type);
    if (props.type == modalType.ADD) title.value = "新增";
    else if (props.type == modalType.EDIT) title.value = "编辑";
  },
  {
    deep: true,
    immediate: true,
  }
);

const formObj = reactive({
  mobile: undefined,
  avatar: undefined,
  wxNumber: undefined,
  job: undefined,
  name: undefined,
  email: undefined,
  file: undefined,
  addr: undefined,
  companyName: undefined,
});

const { formref, formModel } = useForm(formObj);

watch(
  () => props.data,
  () => {
    console.log(props.data);
    if (props.type == modalType.EDIT) {
      formModel.value = { ...formModel.value, ...props.data };
      if(props.data.companyName) formModel.value.companyName = props.data.companyName.split(",");
      formModel.value.addr = props.data.addr;
      fileList.value = formModel.value.avatar
        ? [
            {
              uid: Number(new Date()),
              name: formModel.value.avatar,
              status: "done",
              url: config.baseurl + formModel.value.avatar,
            },
          ]
        : [];
    }
  },
  {
    deep: true,
    immediate: true,
  }
);

const cancel = () => {
  emit("update:visible");
};
const doConfirm = () => {
  console.log("进入提交");
  formref.value.validate().then(() => {
    const obj = {
      ...formModel.value,
      file: formModel.value.file,
      companyName: formModel.value.companyName.join(",")
    };
    console.log("要提交的数据：", obj);
    emit("ok", { type: props.type, obj });
  });
};
</script>

